// userPageC/pages/swimAround/selAddr/selAddr.js
const app = getApp()
const WXAPI = require('../../../../api/api')
var city = require('../../../../utils/utils.js');
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    hotCity: [
      {id: 0,value: '北京'},
      {id: 1,value: '上海'},
      {id: 2,value: '广州'},
      {id: 3,value: '成都'},
      {id: 4,value: '杭州'},
      {id: 5,value: '南京'},
      {id: 6,value: '苏州'},
      {id: 7,value: '重庆'},
      {id: 8,value: '天津'},
    ],
    selectedCode: 0,
    lng: null,
    lat: null,
    siteData: {},
    hotCityDTOList: [],
    jtkCityDTOList: [],
    // 快捷导航-列表
    kj_list: [],
    // 快捷导航-选中的index
    kj_index: -1,
    // 展示/隐藏 toast
    toggle_toast: false,
    // 城市列表
    city_list: [],
    // 获取窗口的高度
    win_height: 0,
    // 置顶高度
    scrollTop: 0,
    // 置顶id
    scrollTopId: '',
    // 选中的城市
    city_name: "上海市",
    // 热门城市列表
    hotcity_list: [{ cityCode: 110000, city: '北京市' }, { cityCode: 310000, city: '上海市' }, { cityCode: 440100, city: '广州市' }, { cityCode: 440300, city: '深圳市' }, { cityCode: 330100, city: '杭州市' }, { cityCode: 320100, city: '南京市' }, { cityCode: 420100, city: '武汉市' }, { cityCode: 410100, city: '郑州市' }, { cityCode: 120000, city: '天津市' }, { cityCode: 610100, city: '西安市' }, { cityCode: 510100, city: '成都市' }, { cityCode: 500000, city: '重庆市' }]
  },
  attached(){
    this.setNavSize()
    var lng = app.globalData.lnt 
    var lat = app.globalData.lat 
    this.setData({
      lng: lng,
      lat: lat
    })
    var that = this;
    // 处理 快捷导航，字母列表
    var kjList = city.get_kjList();
    that.setData({
      kj_list: kjList
    }, () => {
      that.isTouch = false;
      // 获取位置信息
      that.data.kj_list.forEach((d, i) => {
        that._wxQueryElementInfo("#item-" + i).then(res => {
          d.top = res[0].top;
          d.left = res[0].left;
          d.height = res[0].height;
          d.width = res[0].width;
        });
      });
    });
    // 获取城市列表
    this.getCurrentSiteList()
  },
  /**
   * 组件的方法列表
   */
  methods: {
    /* 获取站点列表 */
    getCurrentSiteList(){
      var data = {
        lng: this.data.lng,
        lat: this.data.lat,
      }
      WXAPI.currentSiteList( data, (res) =>{
        const data = res.result
        data.jtkCityDTOList.forEach(item => {
          this.data.kj_list.push(item.firstWord)
        });
        this.setData({
          siteData: data,
          hotCityDTOList: data.hotCityDTOList,
          city_list: data.jtkCityDTOList,
        })
        
        console.log('this.data.jtkCityDTOList',this.data.jtkCityDTOList)
      })
    },
    /* 选择站点 */
    handleSite(e){
      
      var item = e.currentTarget.dataset.item
      this.setData({
        selectedCode: item.id
      })
      this.triggerEvent('setCity',item)
      this.handleChose()
    },
    setNavSize: function () {
      var windowHeight = wx.getSystemInfoSync().windowHeight
      windowHeight = windowHeight - app.gettop.status - app.gettop.navHeight
      this.setData({
        statusHeight: app.gettop.height,
        status: app.gettop.status,
        navHeight: app.gettop.navHeight,
        mobbleBottom: app.mobile.mobbleBottom,
        windowHeight: windowHeight
      })
    },
    /* 关闭站点 */
    handleChose(){
      this.triggerEvent('choseAddr')
    },
    /**
     * 手指触摸快捷导航列表
     * **/
    _onTouchStart: function (e) {
      var that = this;
      that.isTouch = true;
      // 展示选中字母
      that.setData({
        toggle_toast: true
      });
      that._markSlideItemSeleted(e.touches[0].clientY);
    },
    _onTouchMove: function (e) {
      this._markSlideItemSeleted(e.touches[0].clientY);
    },
    _onTouchEnd: function (e) {
      var that = this;
      that.isTouch = false;
      // 隐藏选中字母
      setTimeout(function () {
        that.setData({
          toggle_toast: false
        });
      }, 1000);
    },
    // 根据y的位置标记SlideItem的selected状态
    _markSlideItemSeleted: function (y) {
      for (var i = 0; i < this.data.kj_list.length; i++) {
        var d = this.data.kj_list[i];
        if (y >= d.top && y <= d.top + d.height) {
          if (this.data.kj_index == i) {
            return;
          }
          this._setSlideItemSelectStatus(d, i);
          console.log("当前选中=>" + d.key);
          return;
        }
      }
    },
    _setSlideItemSelectStatus(d, i) {
      d.selected = true;
      if (this.data.kj_index != -1) {
        this.data.kj_list[this.data.kj_index].selected = false;
      }
      // 得到当前选中的index；同时改变选中的展示状态
      this.setData({
        kj_list: this.data.kj_list,
        kj_index: i
      });
  
      // 热门城市：返回顶部；（第一个为热门城市）
      // 其他城市：锚点跳转到指定楼层
      if (this.data.kj_index > 0) {
        this.setData({
          scrollTopId: d.key,
        });
      } else if (this.data.kj_index == 0) {
        this.setData({
          scrollTop: 0,
        });
      } else {}
    },
    // 选择城市
    choose_city(event) {
      var type = event.currentTarget.dataset.type;
      if (type == 'hot') {
        console.log('热门城市：', event.currentTarget.dataset.city)
      } else if (type == 'normal') {
        console.log('普通城市：', event.currentTarget.dataset.city)
      } else {}
      this.setData({
        city_name: event.currentTarget.dataset.city
      });
    },
    // 获取元素位置信息
    _wxQueryElementInfo: function (selector) {
      return new Promise((resolve, reject) => {
        var query = wx.createSelectorQuery().in(this);
        query.select(selector).boundingClientRect();
        query.selectViewport().scrollOffset();
        query.exec(function (res) {
          resolve(res);
        });
      });
    }
  }
})
